<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
      <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->
      <div class="filter-container">
        <el-button class="filter-item" type="primary" icon="el-icon-edit"
                   @click="handleAdd">新增
        </el-button>
      </div>
      <!-- 查询结果 -->
      <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>

        <el-table-column align="center" min-width="100" label="服务商名称" prop="serviceName"/>
        <el-table-column align="center" min-width="100" label="服务商统一信用代码" prop="unicode"/>
        <el-table-column align="center" min-width="100" label="收款账号" prop="account"/>
        <el-table-column align="center" min-width="100" label="账号名称" prop="accountName"/>
        <el-table-column align="center" min-width="100" label="所属银行代码" prop="bankCode"/>
        <el-table-column align="center" min-width="100" label="开户联行号" prop="interBankNo"/>
        <el-table-column align="center" min-width="100" label="联系电话" prop="phone"/>
        <el-table-column align="center" min-width="100" label="手机号" prop="mobile"/>
        <el-table-column align="center" min-width="100" label="公司地址" prop="address"/>
        <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
          <el-button type="primary" size="mini"
                     @click="handleEdit(scope.row)">修改
          </el-button>
          <el-button type="danger" size="mini"
                     @click="doDelete(scope.row)">删除
          </el-button>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize"
                  @pagination="getList"/>
      <el-dialog :visible.sync="editDialogVisible" :title="textMap[dialogStatus]">
        <el-form ref="editForm" :rules="editFormRules" :model="editForm" status-icon label-position="left"
                 label-width="100px" style="width: 400px; margin-left:50px;">
          <el-form-item label="服务商名称" prop="serviceName">
            <el-input v-model="editForm.serviceName"/>
          </el-form-item>
          <el-form-item label="服务商统一信用代码" prop="unicode">
            <el-input v-model="editForm.unicode" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="收款账号" prop="account">
            <el-input v-model="editForm.account" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="账号名称" prop="accountName">
            <el-input v-model="editForm.accountName" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="所属银行代码" prop="bankCode">
            <el-input v-model="editForm.bankCode" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="开户联行号">
            <el-input v-model="editForm.interBankNo" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="editForm.phone" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="editForm.mobile" auto-complete="off"/>
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input v-model="editForm.address" auto-complete="off"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button v-if="dialogStatus=='create'" type="primary" @click="doCreate">确定</el-button>
            <el-button v-else type="primary" @click="doEdit">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    import {doGet, doPost} from '@/api'
    import Pagination from '@/components/Pagination'

    const FETCH_PAGE = 'serviceman.html'
    const FETCH_URL = {
      LIST: `${FETCH_PAGE}?op=list`,
      CREATE: `${FETCH_PAGE}?op=add`,
      EDIT: `${FETCH_PAGE}?op=batchadd`,
      DELETE: `${FETCH_PAGE}?op=chg`,
      IMPORT: `${FETCH_PAGE}?op=del`
    }
  export default {
    name: 'syslog',
    components: {Pagination},
    data() {
      return {
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
//           page: 1,
//           limit: 20,
        },
        dialogStatus: undefined,
        textMap: {
          update: '编辑',
          create: '创建'
        },
        editForm: {
          serviceName: undefined,
          unicode: undefined,
          account: undefined,
          accountName: undefined,
          bankCode: undefined,
          interBankNo: undefined,
          phone: undefined,
          mobile: undefined,
          address: undefined,
        },
        editFormRules: {
          serviceName: [{required: true, message: '服务商名称不允许为空', trigger: 'blur'}],
          unicode: [{required: true, message: '服务商统一信用代码不允许为空', trigger: 'blur'}],
          account: [{required: true, message: '收款账号不允许为空', trigger: 'blur'}],
          accountName: [{required: true, message: '账号名称不允许为空', trigger: 'blur'}],
          bankCode: [{required: true, message: '所属银行代码不允许为空', trigger: 'blur'}],
        },
        editDialogVisible: false,
        editIndex:undefined
      }
    },
    created() {
      this.getList()
    },
    methods:{
      getList() {
        this.listLoading = true;
        doGet(FETCH_URL.LIST, this.listQuery).then(response => {
//          console.log(response)
          this.list = response.rows;
          this.total = response.rows.length;
          this.listLoading = false
        }).catch(() => {
          this.list = [];
          this.total = 0
          this.listLoading = false
        })
      },
      handleEdit(row) {
        this.editForm = Object.assign({}, row)
        this.editIndex = this.list.indexOf(row)
        this.dialogStatus = 'update'
        this.editDialogVisible = true
        this.$nextTick(() => {
          this.$refs['editForm'].clearValidate()
        })
      },
      handleAdd() {
        this.editForm.serviceName = undefined;
        this.editForm.unicode = undefined;
        this.editForm.account = undefined;
        this.editForm.accountName = undefined;
        this.editForm.bankCode = undefined;
        this.editForm.interBankNo = undefined;
        this.editForm.phone = undefined;
        this.editForm.mobile = undefined;
        this.editForm.address = undefined;
        this.editDialogVisible = true;
        this.$nextTick(() => {
          this.$refs['editForm'].clearValidate()
        })
      },
      doEdit() {
        this.$refs['editForm'].validate(valid => {
          if (valid) {
            let sendData = {
              ...this.editForm,
            }
            doGet(FETCH_URL.DELETE, sendData)
              .then(response => {
                this.getList()
                this.editDialogVisible = false
                this.list[this.editIndex] = this.editForm
                this.$notify.success({
                  title: '成功',
                  message: '修改成功'
                })
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.message
                })
              })
          }
        })
      },
      doCreate() {
        this.$refs['editForm'].validate(valid => {
          if (valid) {
            let sendData = {
              ...this.editForm
            };
            doGet(FETCH_URL.CREATE, sendData)
              .then(response => {
                this.getList();
                this.editDialogVisible = false;
                this.$notify.success({
                  title: '成功',
                  message: '添加成功'
                })
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.message
                })
              })
          }
        })
      },
      doDelete(row) {
        doGet(FETCH_URL.IMPORT, row.unicode)
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
            this.total--
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
          })
      },
    }
  }
</script>
